<template>
  <button v-ripple class="lunaButton" :class="[ButtonType, ButtonColor]" @click="handleClick">
    <i class="iconfont" :class="icon"></i>
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'index',
  props: {
    icon: {
      type: String,
      default: 'icon-warn'
    },
    type: {
      type: String,
      default: 'primary'
    },
    lighter: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ButtonType() {
      switch (this.type) {
        case 'primary':
          return 'LunaPrimaryButton'
        case 'success':
          return 'LunaSuccessButton'
        case 'warning':
          return 'LunaWarningButton'
        case 'error':
          return 'LunaErrorButton'
        case 'alert':
          return 'LunaAlertButton'
        case 'text':
          return 'LunaTextButton'
        case 'fab':
          return 'LunaFabButton'
        case 'outline':
          return 'LunaOutlineButton'
        case 'icon':
          return 'LunaIconButton'
        case 'col':
          return 'LunaColButton'
        case 'expand':
          return 'LunaExpandButton'
      }
      return 'LunaNormalButton'
    },
    ButtonColor() {
      switch (this.lighter) {
        case true:
          return 'LunaLighterButton'
      }
      return ''
    }
  },
  methods: {
    handleClick(e) {
      this.$emit('onClick', e)
    }
  }
}
</script>

<style scoped lang="scss">
.lunaButton {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 24px;
  border: 0;
  outline: 0;
  cursor: pointer;
  position: relative;
  i {
    margin-bottom: 4px;
    font-size: 26px;
  }
}
.LunaPrimaryButton {
  background: #ccecff;
  box-shadow: 0 0 4px 0 rgba(204, 236, 255, 0.5);
}
.LunaSuccessButton {
  color: #033215;
  background: #cef0d9;
  box-shadow: 0 0 4px 0 rgba(206, 240, 217, 0.5);
}
.LunaErrorButton {
  color: #450000;
  background: #ffcccc;
  box-shadow: 0 22px 48px 0 rgba(255, 204, 204, 0.5);
}
.LunaWarningButton {
  color: #513d00;
  background: #f0eace;
  box-shadow: 0 22px 48px 0 rgba(240, 234, 206, 0.5);
}
</style>
